<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        v-bind
            1.作用：动态的设置html的标签属性->src url title...
            2.语法：v-bind:属性名="表达式"
            3.注意：简写形式  :属性名="表达式"
    -->
    <div id="app">
        <!-- 正常写法 -->
        <img v-bind:src="imgUrl" v-bind:title="title">
        <!-- 简写形式 -->
        <img :src="imgUrl" :title="title">
    </div>

    <script src="./script/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                title: '我是波仔',
                imgUrl: './imgs/10-02.png'
            }
        })
    </script>
</body>

</html>